/**
 * Created by Administrator on 2018/4/16 0016.
 */
import config from '../../../../config/config.js'
import Options from '../time-mixins'

// prefix
const prefixCls = config.prefix + '-time-picker-cells'
export default {
  mixins: [Options],
  props: {
    /**
     * #property
     *
     * @name    hours
     * @cn      小时
     * @group   基本属性
     * @type    string,number
     * @value   NaN
     * @description 该输入框中的小时
     */
    hours: {
      type: [Number, String],
      default: NaN
    },
    /**
     * #property
     *
     * @name    minutes
     * @cn      分钟
     * @group   基本属性
     * @type    string,number
     * @value   NaN
     * @description 该输入框中的分钟数
     */
    minutes: {
      type: [Number, String],
      default: NaN
    },
    /**
     * #property
     *
     * @name    seconds
     * @cn      秒
     * @group   基本属性
     * @type    string,number
     * @value   NaN
     * @description 该输入框中的秒数
     */
    seconds: {
      type: [Number, String],
      default: NaN
    },
    /**
     * #property
     *
     * @name    showSeconds
     * @cn      是否显示秒
     * @group   控制
     * @type    boolean
     * @value   true
     * @bind    must
     * @description 该输入框中的秒数
     */
    showSeconds: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      spinerSteps: [1, 1, 1].map((one, i) => Math.abs(this.steps[i]) || one),
      prefixCls: prefixCls,
      compiled: false
    }
  },
  computed: {
    classes () {
      return [
                `${prefixCls}`,
                {
                  [`${prefixCls}-with-seconds`]: this.showSeconds
                }
      ]
    },
    hoursList () {
      const hours = []
      const step = this.spinerSteps[0]
      const hour_tmpl = {
        text: 0,
        selected: false,
        disabled: false,
        hide: false
      }
      const disableFun = typeof this.disabledHours === 'function' ? this.disabledHours : (h)=>this.disabledHours.includes(h)
      for (let i = 0; i < 24; i += step) {
        const hour = Artery.deepCopy(hour_tmpl)
        hour.text = i

        if (disableFun(i)) {
          hour.disabled = true
          if (this.hideDisabledOptions) hour.hide = true
        }
        if (this.hours === i) hour.selected = true
        hours.push(hour)
      }

      return hours
    },
    minutesList () {
      const minutes = []
      const step = this.spinerSteps[1]
      const minute_tmpl = {
        text: 0,
        selected: false,
        disabled: false,
        hide: false
      }
      const disableFun = typeof this.disabledMinutes === 'function' ? this.disabledMinutes : (m)=>this.disabledMinutes.includes(m)
      for (let i = 0; i < 60; i += step) {
        const minute = Artery.deepCopy(minute_tmpl)
        minute.text = i

        if (disableFun(i)) {
          minute.disabled = true
          if (this.hideDisabledOptions) minute.hide = true
        }
        if (this.minutes === i) minute.selected = true
        minutes.push(minute)
      }
      return minutes
    },
    secondsList () {
      const seconds = []
      const step = this.spinerSteps[2]
      const second_tmpl = {
        text: 0,
        selected: false,
        disabled: false,
        hide: false
      }
      const disableFun = typeof this.disabledSeconds === 'function' ? this.disabledSeconds : (s)=>this.disabledSeconds.includes(s)
      for (let i = 0; i < 60; i += step) {
        const second = Artery.deepCopy(second_tmpl)
        second.text = i

        if (disableFun(i)) {
          second.disabled = true
          if (this.hideDisabledOptions) second.hide = true
        }
        if (this.seconds === i) second.selected = true
        seconds.push(second)
      }

      return seconds
    }
  },
  methods: {
    getCellCls (cell) {
      return [
                `${prefixCls}-cell`,
                {
                  [`${prefixCls}-cell-selected`]: cell.selected,
                  [`${prefixCls}-cell-disabled`]: cell.disabled
                }
      ]
    },
    handleClick (type, cell) {
      if (cell.disabled) return
      const data = {}
      data[type] = cell.text
      this.$emit('on-change', data)
      this.$emit('on-pick-click')
    },
    scroll (type, index) {
      const from = this.$refs[type].scrollTop
      const to = 24 * this.getScrollIndex(type, index)
      Artery.scrollTop(this.$refs[type], from, to, 500)
    },
    getScrollIndex (type, index) {
      const Type = Artery.firstUpperCase(type)
      const disabled = this[`disabled${Type}`]
      if (disabled.length && this.hideDisabledOptions) {
        let _count = 0
        disabled.forEach(item => item <= index ? _count++ : '')
        index -= _count
      }
      return index
    },
    updateScroll () {
      const times = ['hours', 'minutes', 'seconds']
      this.$nextTick(() => {
        times.forEach(type => {
          this.$refs[type].scrollTop = 24 * this[`${type}List`].findIndex(obj => obj.text == this[type])
        })
      })
    },
    formatTime (text) {
      return text < 10 ? '0' + text : text
    }
  },
  watch: {
    hours (val) {
      if (!this.compiled) return
      this.scroll('hours', this.hoursList.findIndex(obj => obj.text == val))
    },
    minutes (val) {
      if (!this.compiled) return
      this.scroll('minutes', this.minutesList.findIndex(obj => obj.text == val))
    },
    seconds (val) {
      if (!this.compiled) return
      this.scroll('seconds', this.secondsList.findIndex(obj => obj.text == val))
    }
  },
  mounted () {
    this.$nextTick(() => {
      if (this.hours) {
        this.scroll('hours', this.hoursList.findIndex(obj => obj.text == this.hours))
      }
      if (this.minutes) {
        this.scroll('minutes', this.minutesList.findIndex(obj => obj.text == this.minutes))
      }
      if (this.seconds) {
        this.scroll('seconds', this.secondsList.findIndex(obj => obj.text == this.seconds))
      }
      this.compiled = true
    });
  }
}
